<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <title>Query Layer</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript">
         //copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
          function getURLParam(name) {
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            return (results === null ? "" : decodeURIComponent(results[1]));
          }
          //http://code.google.com/p/gmaps-api-issues/issues/detail?id=1054
          var v = getURLParam('v')||'2.141';
          document.write('<script src="http://maps.google.com/maps?file=api&amp;v='+v+'&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"><'+ '/script>');
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/arcgislink' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var gmap = null;
            var dyna = null;
            var hStyle = {
              fillColor: '#883333',
              fillOpacity: 0.35,
              outlineColor: '#FF0000',
              outlineWeight: 3,
              outlineOpacity: 1
            };
            var style = {
              fillColor: '#888888',
              fillOpacity: 0.35,
              outlineColor: '#FFFFFF',
              outlineWeight: 1,
              outlineOpacity: 1
            };
            function init() {
              var tiled = new ArcGISTileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer');
              GEvent.addListener(tiled, 'load', function() {
              
                gmap = new GMap2(document.getElementById("map"), {
                  mapTypes: [new ArcGISMapType([tiled])]
                });
                gmap.setCenter(new GLatLng((31.98 + 35.28) / 2, (-83.41 - 78.47) / 2), 8);
                gmap.addMapType(G_NORMAL_MAP);
                gmap.addControl(new GLargeMapControl());
                gmap.addControl(new GMapTypeControl());
                gmap.enableScrollWheelZoom();
                dyna = new ArcGISMapOverlay("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
                GEvent.addListener(dyna, 'load', initFunctionality);
              });
              
              
              
            }
            
            function initFunctionality() {
              var layer = dyna.getMapService().getLayer(3);
              var params = {
                returnGeometry: true,
                where: "STATE_NAME = 'South Carolina'",
                outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"],
                outSR: 4326
              };
              layer.query(params, processResultSet);
            }
            
            function processResultSet(rs) {
              var fs = rs.features;
              for (var i = 0, c = fs.length; i < c; i++) {
                var ovs = createGPolys(fs[i], rs.spatialReference);
                for (var j = 0; j < ovs.length; j++) {
                  gmap.addOverlay(ovs[j]);
                }
              }
            }
            
            function createGPolys(feat, sr) {
              var ovs = ArcGISUtil.fromFeatureToOverlays(feat, sr, style);
              var a = feat.attributes;
              var html = "<div id='iwdiv'><b>" + a['NAME'] + "</b><hr/>" +
              "<b>2000 Population: </b>" +
              a['POP2000'] +
              "<br/>" +
              "<b>2000 Population per Sq. Mi.: </b>" +
              a['POP00_SQMI'] +
              "<br/>" +
              "<b>2007 Population: </b>" +
              a['POP2007'] +
              "<br/>" +
              "<b>2007 Population per Sq. Mi.: </b>" +
              a['POP07_SQMI'] +
              '</div>';
              for (var j = 0, jc = ovs.length; j < jc; j++) {
                var ov = ovs[j];
                GEvent.addListener(ov, 'mouseover', function() {
                  // highligh all parts of the geometry, not just one GPolygon. e.g 2 polys in charlston
                  for (var i = 0, ic = ovs.length; i < ic; i++) {
                    ovs[i].setStrokeStyle({
                      color: hStyle.outlineColor,
                      weight: hStyle.outlineWeight
                    });
                    ovs[i].setFillStyle({
                      color: hStyle.fillColor,
                      opacity: hStyle.fillOpacity
                    });
                  }
                  // you can do more complex algorithm to get gravity or mean center etc.
                  var latlng = ov.getBounds().getCenter();
                  gmap.openInfoWindowHtml(latlng, html);
                });
                GEvent.addListener(ov, 'mouseout', function() {
                  for (var i = 0, ic = ovs.length; i < ic; i++) {
                    ovs[i].setStrokeStyle({
                      color: style.outlineColor,
                      weight: style.outlineWeight
                    });
                    ovs[i].setFillStyle({
                      color: style.fillColor,
                      opacity: style.fillOpacity
                    });
                  }
                  
                  gmap.closeInfoWindow();
                });
                GEvent.addListener(ov, 'click', function(latlng) {
                  gmap.openInfoWindowHtml(latlng, html);
                  
                });
                
              }
              return ovs;
            }
        </script>
    </head>
    <body onload='init()' onunload='GUnload()'>
        <a href='../docs/examples.html'>More examples</a>
        | Use <a href='?packed'>Packed </a>
        | <a href='?'> Unpacked</a>
        Version of the script.
        <br/>
        <div>
            This sample is modeled after <a href="http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/querytask/query_hover.html">http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/querytask/query_hover.html</a>
        </div>
        <div>
            Hover over a county in South Carolina to get more information.
        </div>
        <div id="map" style="width:700px; height:600px; border:1px solid #000;">
        </div>
    </body>
</html>
